<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="renderer" content="webkit">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	    <title>建新街道移动办公 - E事通</title>
	    <link rel="stylesheet" href="/app/static/layui/css/layui.css">
	    <link rel="stylesheet" href="/app/static/styles/style.css">
	    <link rel="icon" href="image/code.png">
	    <script src="/app/static/scripts/jquery-1.9.1.js"></script>
	    <script type="text/javascript" src="/app/static//layui/layui.all.js"></script>
		<script type="text/javascript" src="/app/static/scripts/index.js"></script>
	</head>

	<body class="body">
		
		<div class="section">
			<div class="wrapper-md">
	       		<h1 class="fl" id="title">角色管理</h1>
	       		<div class="fr">
	       			<div class="def-btn-group">
	       				<button class="def-btn def-btn-primary" onclick="addNew()"><i class="gopng gopng_page"></i> 添加</button>
	       			</div>
	       		</div>
	        </div>

			<div class="section-content">
				<div class="layui-form filterDiv">
					<div class="layui-inline">
						<label for="">角色名称：</label>
						<div class="layui-input-inline">
						    <input type="text" class="layui-input" />
				      	</div>
					</div>
					<button class="def-btn def-btn-normal ml20"><i class="gopng gopng_search"></i> 查询</button>
				</div>
				<div class="layui-form">
					<table class="layui-table table-center table-blue" >
						<thead>
							<tr>
								<th>角色ID</th>
								<th>角色姓名</th>
								<th>功能授权</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td>街道办人员</td>
								<td></td>
								<td>
								
								</td>
							</tr>
							<tr>
								<td>2</td>
								<td>社工人员</td>
								<td><a href="power.html"><i class="layui-icon">&#xe642;</i></a></td>
								<td>
									<div id="tableHandleBtn" class="def-breadcrumb">
										<span class="add" onclick="remove()">删除</span>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					
					<div class="text-right">
						<div id="page"></div>
					</div>
				</div>
			</div>
		</div>


		<!--新增弹框-->
		<script type="text/template" id="addNew_modal">
			<div class="modal_content modal_label_width">
				<form class="layui-form">
					<div class="layui-form-item">
				        <label class="layui-form-label">角色名称</label>
				        <div class="layui-input-block">
				            <input type="text" lay-verify="required" class="layui-input">
				        </div>
			        </div>
				</form>
			</div>
		</script>
		<!--/ 新增弹框-->


		<script type="text/javascript">
			
			var form = layui.form,
				layer = layui.layer,
				layedit = layui.layedit,
				laydate = layui.laydate;
				
				
				form.render();
				
			
			
				//分页
				layui.laypage.render({
					elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
					,count: 50 //数据总数，从服务端得到
				    ,skin: '#1E9FFF'
				    ,skip: true
				});
	
	
	
	
				//新增
				function addNew(){
					layer.open({
						type: 1,
						skin: 'layui-layer-demo', //样式类名
						anim: 2,
						title: '添加角色',
						closeBtn: 1, //不显示关闭按钮
						shadeClose: false, //开启遮罩关闭
						area: ['500px', '250px'],
						btn: ['确定'],
						yes: function(index, layero) { //按钮【按钮一】的回调
							alert('点击了确定')
							layer.close(index)		//关闭方法
						},
						content: $('#addNew_modal').html(),
						success:function(){
							form.render()
						}
					})
				}
							
				//删除
				function remove(){
					layer.confirm('您确定要删除吗？', {
						btn: ['删除', '取消'] //按钮
					}, function() {
						layer.msg('删除', {
							icon: 1
						});
					}, function() {
						layer.msg('取消', {
							icon: 2
						});
					});
				}
			
			
		</script>

	</body>
</html>